<template>
    <el-row :gutter="20">
        <el-col :span="8">
            <el-card shadow="hover">
                <div class="user">
                    <img src="../assets/images/user.png" alt="">
                    <div class="userInfo">
                        <p div class="name">Admin</p>
                        <p div class="access">身份：管理员</p>
                    </div>
                </div>
                <div class="loginInfo">
                    <p>上次登录时间：<span>2024-03-06</span></p>
                    <p>上次登陆地点：<span>新乡</span></p>
                </div>
            </el-card>
            <el-card shadow="hover" style="margin-top: 20px;">
                <el-table :data="tableData" stripe style="width: 100%;">
                    <el-table-column v-for="(value, key) in tableLabel" :prop="key" :label="value">
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="16">
            <div class="num">
                <el-card v-for="item in countData" :key="item.id" :body-style="{ display: 'flex', padding: 0 }">
                    <i class="icon" :class="`el-icon-${item.icon}`" :style="{ backgroundColor: item.color }"></i>
                    <div class="details">
                        <p class="price" style="font-family: 'Times New Roman';font-size: 30px;">{{
        priceFormate(item.value) }}</p>
                        <p class="desc">{{ item.name }}</p>
                    </div>
                </el-card>
            </div>
            <div style="margin-left:20px">
                <!-- 折线图 -->
                <el-card style="height:280px" shadow="hover">
                    <div ref="echarts1" style="height:280px"></div>
                </el-card>
                <div class="graph">
                    <!-- 柱状图 -->
                    <el-card style="height:320px" shadow="hover">
                        <div ref="echarts2" style="height:280px"></div>
                    </el-card>
                    <!-- 饼状图 -->
                    <el-card style="height:320px" shadow="hover">
                        <div ref="echarts3" style="height:280px"></div>
                    </el-card>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import { getData } from '@/api';
import * as echarts from 'echarts';

export default {
    name: 'Home',
    data() {
        return {
            tableLabel: {
                name: '课程',
                todayBuy: '今日购买',
                monthBuy: '本月购买',
                totalBuy: '总购买',
            },
            tableData: [],
            countData: [
                {
                    id: 1,
                    name: "今日支付订单",
                    value: 1234,
                    icon: "success",
                    color: "#2ec7c9",
                },
                {
                    id: 2,
                    name: "今日收藏订单",
                    value: 210,
                    icon: "star-on",
                    color: "#ffb980",
                },
                {
                    id: 3,
                    name: "今日未支付订单",
                    value: 1234,
                    icon: "s-goods",
                    color: "#5ab1ef",
                },
                {
                    id: 4,
                    name: "本月支付订单",
                    value: 1234,
                    icon: "success",
                    color: "#2ec7c9",
                },
                {
                    id: 5,
                    name: "本月收藏订单",
                    value: 210,
                    icon: "star-on",
                    color: "#ffb980",
                },
                {
                    id: 6,
                    name: "本月未支付订单",
                    value: 1234,
                    icon: "s-goods",
                    color: "#5ab1ef",
                },
            ]
        }
    },
    methods: {
        priceFormate(price) {
            return "￥" + price
        }
    },
    mounted() {
        getData().then((data) => {
            this.tableData = data.data.getStatisticalData.data.tableData
            const { orderData, userData, videoData } = data.data.getStatisticalData.data

            // 折线图
            const echarts1 = echarts.init(this.$refs.echarts1)

            const echarts1Option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [],
            }

            const xAxis = Object.keys(orderData.data[0])
            echarts1Option.xAxis.data = orderData.date

            xAxis.forEach(key => {
                echarts1Option.series.push({
                    name: key,
                    type: 'line',
                    data: orderData.data.map(item => item[key])
                })
            })

            echarts1Option && echarts1.setOption(echarts1Option);

            // 柱状图
            const echarts2 = echarts.init(this.$refs.echarts2)
            const echarts2Option = {
                legend: {},
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
            }

            echarts2Option.xAxis.data = userData.map(item => item.date)
            echarts2Option.series = [
                {
                    name: '新增用户',
                    data: userData.map(item => item.new),
                    type: 'bar'
                },
                {
                    name: '活跃用户',
                    data: userData.map(item => item.active),
                    type: 'bar'
                }
            ]

            echarts2Option && echarts2.setOption(echarts2Option);

            // 饼状图
            const echarts3 = echarts.init(this.$refs.echarts3)
            const echarts3Option = {
                tooltip: {
                    trigger: 'item'
                },
            }
            echarts3Option.series = {
                data: videoData,
                type: 'pie'
            }
            echarts3Option && echarts3.setOption(echarts3Option);
        })
    }
}
</script>

<style lang="less" scoped>
.user {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;

    img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-right: 40px;
    }

    .userInfo {
        .name {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .access {
            color: #999999;
        }
    }
}

.loginInfo {
    p {
        line-height: 28px;
        font-size: 14px;
        color: #999999;

        span {
            color: #666666;
            margin-left: 60px;
        }
    }
}

.num {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 20px;

    .el-card {
        width: 32%;
        margin-bottom: 20px;

        .icon {
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            font-size: 30px;
            color: #fff;
        }

        .details {
            display: flex;
            flex-direction: column;
            justify-content: center;

            margin-left: 15px;

            .price {
                font-size: 30px;
                margin-bottom: 10px;
                line-height: 30px;
                height: 30px;
            }

            .desc {
                font-size: 14px;
                color: #999;
                text-align: center;
            }
        }
    }
}

.graph {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .el-card {
        width: 49%;
    }
}
</style>